<template>
  <canvas ref="canvas" class="model-viewer"></canvas>
  <div v-if="loading" class="model-mask"></div>
</template>

<script lang="ts">
import { AbstractMesh, ArcRotateCamera, Vector3 } from '@babylonjs/core'
import { defineComponent, onMounted, ref } from 'vue'

import useCanvas from '@/plugins/useCanvas'
import useViewer from '@/plugins/useViewer'

export default defineComponent({
  components: {},
  setup(props, context) {
    const canvas = ref<HTMLCanvasElement>()
    const loading = ref(true)
    const { load, toggleAnchor } = useViewer(context)

    onMounted(async () => {
      if (!canvas.value) return
      const { createScene, engine } = useCanvas(canvas.value)

      window.addEventListener('resize', function () {
        engine.resize()
      })

      const { currentScene: si, scenes } = await load('', createScene, engine)
      // loading.value = false
      si.scene.onReadyObservable.addOnce(() => {
        loading.value = false
        context.emit('rendered', scenes)

        setTimeout(() => {
          toggleAnchor('anchor_1', false)
          console.log('set anchor toggle')
        }, 2000)
      })
    })

    return {
      canvas,
      loading,
      toggleAnchor
    }
  }
})
</script>

<style scoped>
.model-viewer {
  width: 100vw;
  height: 100vh;
  touch-action: none;
}
.model-mask {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}
.model-mask:after {
  display: block;
  content: '';
  width: 40px;
  height: 40px;
  padding: 6px;
  background: linear-gradient(to right, #fff 0%, #fff 100%),
    linear-gradient(to right, #fff 0%, #74baff 100%);
  background-clip: content-box, padding-box;
  border-radius: 50%;
  animation: identifier 1s linear 0s infinite normal none;
}
@keyframes identifier {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
